<template>
  <div class="card">
    <h1 class="title">学生卡服务</h1>
    <div class="card-content">
      <div class="meun-card">
        <div class="meun">
          <img class="avator" src="../../assets/avator.png">
          <span class="name">{{xm}}</span>
          <span class="num">卡号:15033098</span>
          <span class="money">余额：<i class="money-bg">85.00</i></span>
        </div>
        <div class="detail-wrapper">
          <span class="detail">账单明细</span>
        </div>
      </div>
      <div class="card-wrapper">
        <h1 class="my-title">我的账单</h1>
        <div class="search-time">
          <form action="">
            <span class="search">查询年月:</span>
            <input type="date" class="search-input" ref="mintime" value=""/>
            <span class="search-to">至</span>
            <input type="date" class="search-input" ref="maxtime" value=""/>
            <button class="btn-card" type="button">查询</button>
          </form>
        </div>
        <div style="margin: 0 45px;" class="table" v-if="newlist.length!==0">
          <el-table :data="this.newlist.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column label="消费类型" prop="jylx"></el-table-column>
            <el-table-column label="时间" prop="jysj"></el-table-column>
            <el-table-column label="地点" prop="shmc"></el-table-column>
            <el-table-column label="金额" prop="jye"></el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="newlist.length"@size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Card',
  data () {
    return {
      xm: this.$router.params.xm
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/font/font.css"
  .card
    .title
      width 100%
      height 155px
      padding-left 54px
      padding-top 5px
      font-family 'JLH'
      font-size 62px
      background #135677
      color #fff
      -webkit-text-fill-color #fff
      -webkit-text-stroke 2px #fff
    .card-content
      position absolute
      display flex
      overflow hidden
      top 80px
      margin-left 54px
      width 90%
      height 500px
      background #fff
      box-shadow 1px 13px 25px #949494
      .meun-card
        flex 0 0 134px
        width 134px
        .meun
          /*font-size 16px*/
          font-weight 700px
          color #a1a19c
          font-family SimHei
          .avator
            margin 5px 0 3px 25px
          .name
            display block
            text-align center
          .num
            display block
            font-size 14px
            margin 30px 0 13px 13px
          .money
            margin-left 13px
            .money-bg
              font-style normal
              background #186d92
              color #fff
      .detail-wrapper
        .detail
          display block
          position absolute
          margin-left 13px
          margin-top 15px
          width 122px
          height 30px
          line-height 30px
          color #186d92
          background #fff
          font-size: 25px
          font-family SimHei
          box-shadow -6px 0px 18px #949494
      .card-wrapper
        flex 1
        box-shadow -2px 0px 10px #949494
        .my-title
          color #a1a19c
          font-size 25px
          font-family SimHei
          font-weight normal
          margin 30px 0 30px 35px
          padding-left 6px
          box-shadow -5px 0px 0px #186d92
        .search-time
          color: #a1a19c
          margin: 0 0 30px 35px
          font-weight: 700
          height: 20px
          .search
            font-size 16px
            box-shadow -5px 0px 0px #186d92
            padding-left 9px
          .searchTo
            font-size 16px
          .search-input
            height 20px
            outline none
            border 1px solid #a1a19c
          .btn-card
            height 25px
            width 45px
            background #fff
            border 1px solid #a1a19c
            border-radius 5px
</style>
